<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Yahoo</title>
<link rel="stylesheet" href="css/layout.css" type="text/css"/>
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/patches/patch_1-2-3.css" type="text/css"/>
<![endif]-->

<!--
<script type="text/javascript" src="firebug-lite/build/firebug-lite-debug.js"></script>
-->
<script type="text/javascript" src="js/addevent.js"></script>
<script type="text/javascript" src="js/generaltabs.js"></script>
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a href="#nav" class="skip">Skip to navigation (Press Enter).</a></li>
	<li><a href="#col3" class="skip">Skip to main content (Press Enter).</a></li>
</ul>

<div class="page_margins">
	<div class="page">
		<div id="header">
			<div id="topnav">
				<span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
			</div>
			<h1>Yahoo <em>imitate yahoo</em></h1>
			<span>^_^</span>
		</div>
		<!-- begin: main navigation #nav -->
		<div id="nav">
			<div class="hlist">
				<ul>
					<li><a href="#">My Yahoo</a></li>
					<li><a href="#">Make Y! your homepage</a></li>
					<li><a href="#">Y! china</a></li>
				</ul>
			</div>
		</div>
		<!-- end: main navigation -->
		
		<!-- begin: main content area #main -->
		<div id="main">
			<div class="subcolumns">
			<!-- begin: #col1 - first float column -->
			<div id="col1">
				<div id="col1_content" class="clearfix">
					<h2>#col1</h2>
					<p>First Float Column</p>
					<div class="subcolumns equalize example1">
						<div class="subcolumns">
							<div class="subc">
								<h6>Topic One</h6>
								<ul>
									<li>List Item 1</li>
									<li>List Item 2</li>
									<li>List Item 3</li>
									<li>List Item 4</li>
									<li>List Item 5</li>
								</ul>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			<!-- end: #col1 -->
			
			<!-- begin: #col2 second float column -->
			<div id="col2">
				<div id="col2_content" class="clearfix">
					<h2>#col2</h2>
					<p>Second Float Column</p>
					<div class="subcolumns equalize box-top">
						<div class="c33l">
							<div class="subcl">
								<h6>Topic One</h6>
								<ul>
									<li>List Item 1</li>
									<li>List Item 2</li>
									<li>List Item 3</li>
									<li>List Item 4</li>
									<li>List Item 5</li>
								</ul>
								<a href="#" class="hideme">&rarr; read more ...</a>
							</div>
						</div>
						<div class="c33l">
							<div class="subc">
								<h6>Topic Two</h6>
								<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
								<a href="#" class="hideme">&rarr; read more ...</a>
							</div>
						</div>
						<div class="c33r">
							<div class="subcr">
								<h6>Topic Three</h6>
								<ul>
									<li>List Item 1</li>
									<li>List Item 2</li>
									<li>List Item 3</li>
									<li>List Item 4</li>
									<li>List Item 5</li>
								</ul>
							</div>
						</div>
					</div>
					<h3 class="hideme">Summing up</h3>
					<div class="subcolumns equalize no-ie-padding box-bottom">
						<div class="c33l">
							<div class="subcl"><a href="#" class="noprint">&rarr; read more <span class="hideme"> about Topic One</span>.</a></div>
						</div>
						<div class="c33l">
							<div class="subc"><a href="#" class="noprint">&rarr; read more <span class="hideme"> about Topic Two</span>.</a></div>
						</div>
						<div class="c33r">
							<div class="subcr"><a href="#" class="noprint">&rarr; read more <span class="hideme"> about Topic Three</span>.</a></div>
						</div>
					</div>
					<div class="subcolumns">
						<div class="floatbox">
							<img src="images/dummy_150.png" alt="" class="float_left" />
							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
            				<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
						</div>
					</div>
					<hr />
					<h3>Tables</h3>
					<table border="0" cellpadding="0" cellspacing="0">
						<caption>
							table 1: this is a simple table with caption
						</caption>
						<thead>
							<tr>
								<th scope="col" colspan="3">table heading</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th scope="col">column 1 </th>
								<th scope="col">column 2 </th>
								<th scope="col">column 3 </th>
							</tr>
							<tr>
								<th scope="row">subhead 1 </th>
								<td>dummy content </td>
								<td>dummy content </td>
							</tr>
							<tr>
								<th scope="row">subhead 2 </th>
								<td>dummy content </td>
								<td>dummy content </td>
							</tr>
							<tr>
								<th scope="row" class="sub">subhead 3 </th>
								<td>dummy content </td>
								<td>dummy content </td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- end: #col2 -->
			
			<!-- begin: #col3 static column -->
			<div id="col3">
				<div id="col3_content" class="clearfix">
					<h2>#col3</h2>
					<p>Static Column</p>
					<div class="info">
						<h2>Successfully tested in  ...</h2>
						<h3>Windows XP/Vista/Window7:</h3>
						<ul>
							<li>Firefox 1.0.4, 1.5, 2.0.17, 3.0.x, 3.5+</li>
							<li>Internet Explorer 5.01, 5.5, 6.0, 7.0, 8.0</li>
							<li>Safari 3.x, 4.0+</li>
							<li>Chrome 1.0+</li>
							<li>Opera 7.50, 8.54, 9.2, 9.5, 9.6 </li>
							<li>Netscape 7.2, 8.1.3</li>
						</ul>
						<h3>Mac (OS 10.4/10.5):</h3>
						<ul>
							<li>Firefox 3.0.3</li>
							<li>iCab 4</li>
							<li>Safari 3.1.2 3.2</li>
							<li>Webkit nightly 5525.26.12</li>
							<li>Camino 1.6.4</li>
							<li>Opera 9.62</li>
						</ul>
						<h3>Linux (Ubuntu):</h3>
						<ul>
							<li>Firefox 3.0.3</li>
						</ul>
						<h3>Mobile Browsers:</h3>
						<ul>
							<li>Safari (iPhone)</li>
							<li>Fennec 1.0a1 (Mobile Firefox, m9 Nokia)</li>
							<li>Opera Mini 4.2 (Windows Mobile)</li>
						</ul>
						<h3>Other Plattforms:</h3>
						<ul>
							<li>Opera 9.3 (Nintendo Wii)</li>
						</ul>
					</div>
				</div>
				<!-- IE Column Clearing -->
				<div id="ie_clearing">&nbsp;</div>
			</div>
			<!-- end: #col3 -->
			</div>
			<br />
			<div class="subcolumns coolsubcol">
				<div class="c33l">
					<div class="subcl">
						<h3>Article Archive </h3>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra.   ... </p>
					</div>
				</div>
				<div class="c33l">
					<div class="subcl">
						<h3>Latest Comments </h3>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra.   ... </p>
					</div>
				</div>
				<div class="c33r">
					<div class="subcr">
						<h3>Monthly Archive </h3>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra.   ... </p>
					</div>
				</div>
			</div>
			<br />
			<div class="subcolumns">
				<hr />
				<a name="floatpos"></a>
				<h3>Text &amp; Images</h3>
				<div class="floatbox">
					<img src="images/dummy_150.png" alt="" class="float_right" />
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
					<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
				</div>
				<hr />
				<div class="floatbox">
					<img src="images/dummy_150.png" alt="" class="float_left" />
					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
            		<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
				</div>
				<hr />
				
			</div>
			<div class="subcolumns">
				<div class="domtab">
					<ul id="gtags2" class="tabnav">
						<li class="active"><a href="#football">Football足球</a></li>
						<li><a href="#nba">NBA篮球</a></li>
						<li><a href="#baseball">Baseball棒球</a></li>
						<li><a href="#news">News新闻</a></li>
					</ul>
					<div id="gtcontent2" class="content">
						<div class="on">
							<div class="subcolumns">
								<div class="c20l">
									<div class="floatbox">
										<p class="icaption_left">
											<img src="images/dummy_150.png" alt="" />
											<strong style="width:140px;">For captions that are </strong>
										</p>
									</div>
								</div>
								<div class="c80r">
									<h3>Unordered List </h3>
									<ul>
										<li>ut enim ad minim veniam</li>
										<li>occaecat cupidatat non proident</li>
										<li>nostrud exercitation ullamco</li>
										<li>labore et dolore magna aliqua</li>
										<li>aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
									</ul>								
								</div>
							</div>
							<div class="subcolumns">
								<ul>
            						<li>ut enim ad minim veniam</li>
            						<li>occaecat cupidatat non proident
              							<ul>
                							<li>facilisis semper</li>
                        					<li>quis ac wisi augue</li>
                        					<li>risus nec pretium</li>
                        					<li>fames scelerisque</li>
            							</ul>
          							</li>
            						<li>nostrud exercitation ullamco</li>
           							<li>labore et dolore magna aliqua</li>
            						<li>aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
          						</ul>
							</div>
						</div>
						<div class="off">
							<h3>Ordered List </h3>
							<ol>
								<li>ut enim ad minim veniam
								<ol>
									<li>facilisis semper</li>
									<li>quis ac wisi augue</li>
									<li>risus nec pretium</li>
									<li>fames scelerisque</li>
								</ol>
								</li>
								<li>occaecat cupidatat non proident</li>
								<li>nostrud exercitation ullamco</li>
								<li>labore et dolore magna aliqua</li>
								<li>aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
							</ol>
						</div>
						<div class="off">
							<h3>Definition List </h3>
          					<dl>
            					<dt>A definition list &mdash; this is &lt;dt&gt; </dt>
            					<dd>A definition list &mdash; this is  &lt;dd&gt; element.  A definition list &mdash; this is  &lt;dd&gt; element. A definition list &mdash; this is  &lt;dd&gt; element. A definition list &mdash; this is  &lt;dd&gt; element. </dd>
            					<dt>A definition list &mdash; this is &lt;dt&gt; </dt>
            					<dd>A definition list &mdash; this is  &lt;dd&gt; element.  A definition list &mdash; this is  &lt;dd&gt; element. A definition list &mdash; this is  &lt;dd&gt; element. A definition list &mdash; this is  &lt;dd&gt; element. </dd>
            					<dt>A definition list &mdash; this is &lt;dt&gt; </dt>
            					<dd>A definition list &mdash; this is  &lt;dd&gt; element.  A definition list &mdash; this is  &lt;dd&gt; element. A definition list &mdash; this is  &lt;dd&gt; element. A definition list &mdash; this is  &lt;dd&gt; element. </dd>
          					</dl>
						</div>
						
						<div class="off">
							<div>
								<h3>Text &amp; Images</h3>
								<div class="floatbox">
									<img src="images/dummy_150.png" alt="" class="float_right" />
									<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p>
									<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="subcolumns">
				<hr />
				<div class="c33l">
					<div class="subcl">
						<h4>
							<img src="images/symb_doc48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Dokumentation
						</h4>
						<p>
							Alle Bausteine des Frameworks sowie die in YAML verwendeten Layout-Methoden sind ausführlich zweisprachig dokumentiert (englisch / deutsch) und mit zahlreichen Beispielen unterlegt.
						</p>
						<h4>
							<img src="images/symb_community48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Community
						</h4>
						<p>
							Um YAML hat sich eine sehr aktive und stetig wachsende Community entwickelt. Für zahlreiche Content-Management-Systeme existieren bereits einsatzbereite Templates auf YAML-Basis. 
						</p>
						<h4>
							<img src="images/symb_web48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Browser
						</h4>
						<p>
							YAML orientiert sich an Webstandards und unterstützt alle aktuellen Webbrowser. Der Internet Explorer erhält gezielte Hilfestellungen und wird in den Versionen 5.x/Win - 8.0 voll unterstützt.
						</p>
					</div>
				</div>
				<div class="c33l">
					<div class="subc">
						<h4>
							<img src="images/symb_stability48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Stabilität
						</h4>
						<p>
							Mit YAML erstellte Layouts zeichnen sich durch eine sehr hohe Stabilität aus. Der Großteil der&nbsp; Browser-Bugs wird von YAML zuverlässig und ohne Eingreifen des Webdesigners abgefangen.
						</p>
						<h4>
							<img src="images/symb_construction48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Barrierefreiheit
						</h4>
						<p>
							Um YAML hat sich eine sehr aktive und stetig wachsende Community entwickelt. Für zahlreiche Content-Management-Systeme existieren bereits einsatzbereite Templates auf YAML-Basis. 
						</p>
						<h4>
							<img src="images/symb_edit48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Freiheit für den Designer
						</h4>
						<p>
							Die Struktur des Markups und der CSS-Bausteine des Frameworks bietet dem Designer/Coder alle Freiheiten bei der Layoutgestaltung. Flexible, elastische, fixe Layout, beliebige Raumaufteilungen - alles ist möglich.
						</p>
					</div>
				</div>
				<div class="c33r">
					<div class="subcr">
						<h4>
							<img src="images/symb_config48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Praxiserprobtes Konzept
						</h4>
						<p>
							YAML ist die Basis vieler kleiner und großer Webseiten und hat sich im Agentureinsatz unter Praxisbedingungen bestens bewährt.
						</p>
						<h4>
							<img src="images/symb_licence48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Flexibles Lizenzmodell
						</h4>
						<p>
							Um YAML hat sich eine sehr aktive und stetig wachsende Community entwickelt. Für zahlreiche Content-Management-Systeme existieren bereits einsatzbereite Templates auf YAML-Basis. 
						</p>
						<h4>
							<img src="images/symb_software48.png" alt="" class="float_left" style="width: 48px; height: 48px;" />
							Weiterentwicklung
						</h4>
						<p>
							YAML wurde im Oktober 2005 veröffentlicht und ist seitdem zu einem stabilen und vielseitigen Layout-Framework herangereift. und wird kontinuierlich weiterentwickelt.
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- end: #main -->
		
		<!-- begin: #footer -->
		<div id="footer">Footer with copyright notice and status information <br />Layout based on <a href="http://www.yaml.de/">YAML</a></div>
		<!-- end: #footer -->
	</div>
</div>
<script type="text/javascript">
var ptag2 = document.getElementById('gtags2'),
    pcnt2 = document.getElementById('gtcontent2'),
	numb2 = 4;

tabscommon(ptag2, pcnt2, numb2);
</script>
</body>
</html>